---
title: Keyboard
description: A hook for observing the state of the keyboard
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { Aside } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/lib/keyboard?raw';

A hook for observing the state of the keyboard

### Installation

**Copy/paste the following code to `~/lib/keyboard.tsx`**:


<Code code={importedCode} lang="tsx" title="~/lib/keyboard.tsx" />

### Usage

```tsx
import * as React from 'react';
import { Input } from '~/components/ui/input';
import { useKeyboard } from '~/lib/keyboard';

function Example() {
  const { isKeyboardVisible, keyboardHeight, dismissKeyboard } = useKeyboard();

  console.log({ isKeyboardVisible, keyboardHeight });

  function onChangeText(text: string) {
    console.log("text", text);
    if (text === 'dismiss') {
      dismissKeyboard();
    }
  }

  return <Input onChangeText={onChangeText} />
}
```
